{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">

    <script src="{% static 'laydate/laydate.js' %}"></script>
    <script src="{% static 'plugins\jQuery\jquery-2.2.3.min.js' %}"></script>

    <script src="{% static 'plugins/vue1/vue.js' %}"></script>

    <style>
        .login-banner {
            width: 100%;
            background: url("{% static 'public/img/banner2.jpg' %}") center bottom/cover no-repeat;
        }
    </style>
{% endblock header_tail %}

{% block section_content %}
    <div style="margin-right: -15px; margin-left: -15px; margin-bottom: -20px;">
        <div class="col-lg-4 col-xs-3">
            <div class="small-box bg-red">
                <div class="inner">
                    <p>任务汇总</p>
                    <h3 id="acceptTask">{{ counts.task_count}}</h3>
                </div>
                <div class="icon">
                    <!--<i class="glyphicon glyphicon-star-empty"></i>-->
                    <i class="fa fa-bell"></i>
                </div>
                {% if is_agent == 1 %}
                    <a href="{% url 'task:manage_agent' 'task' %}"  class="small-box-footer">
                {% endif %}
                {% if is_agent != 1 %}
                    <a href="{% url 'task:manage' 'task' %}"  class="small-box-footer">
                {% endif %}
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg-4 col-xs-3">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <p>配置汇总</p>
                    <h3 id="myTask">{{ counts.config_count }}</h3>
                </div>
                <div class="icon">
                    <i class="fa fa-sitemap"></i>
                </div>
                <a href="{% url 'task:config' %}" class="small-box-footer">
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-lg-4 col-xs-3">
            <div class="small-box bg-green">
                <div class="inner">
                    <p>用户汇总</p>
                    <h3 id="myConfig">{{ counts.user_count }}<sup style="font-size: 20px"></sup></h3>
                </div>
                <div class="icon">
                    <i class="fa fa-list"></i>
                </div>
                 {% if is_agent == 1 %}
                    <a href="{% url 'task:config_user_agent' %}"  class="small-box-footer">
                {% endif %}
                {% if is_agent != 1 %}
                    <a href="{% url 'task:config_user' %}" class="small-box-footer">
                {% endif %}
                    详情&nbsp;
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
{#        {% if not is_agent %}#}
{#        <div class="col-lg-3 col-xs-3">#}
{#            <div class="small-box bg-yellow">#}
{#                <div class="inner">#}
{#                     {% if is_agent %}#}
{#                         <p>收入汇总</p>#}
{#                     {% endif %}#}
{#                    {% if not is_agent %}#}
{#                      <p>支出汇总</p>#}
{#                    {% endif %}#}
{#                    <h3 id="myIncome">{{ counts.income }}</h3>#}
{#                </div>#}
{#                <div class="icon">#}
{#                    <i class="fa fa-diamond"></i>#}
{#                </div>#}
{#                {% if is_agent %}#}
{#                    <a href="{% url 'task:manage_agent' 'project' %}?status=4" class="small-box-footer">#}
{#                    详情&nbsp;#}
{#                    <i class="fa fa-arrow-circle-right"></i>#}
{#                </a>#}
{#                 {% elif not is_agent %}#}
{#                    <a href="{% url 'task:manage' 'project' %}?status=4" class="small-box-footer">#}
{#                    详情&nbsp;#}
{#                    <i class="fa fa-arrow-circle-right"></i>#}
{#                    </a>#}
{#                {% endif %}#}
{##}
{#            </div>#}
{#        </div>#}
{#        {% endif %}#}
    </div>
    <div>
        <div class="box-header with-border">
            {%  if  summaryd_etails_id%}
                <h3 class="box-title">用户详情</h3>
            {% endif %}
             {%  if  not summaryd_etails_id%}
                <h3 class="box-title">{{ model_verbose_name }}</h3>
            {% endif %}
        </div>
        <!-- form start -->
        <div class="box box-primary">
            {% if not summaryd_etails_id %}
                <div class="box-header with-border" style="border-color: #1b6d85">

                    <!-- Date range -->
                    <form role="form" id="searchForm">
                        <input class="no-display" type="text">
                        <p style="clear: both"></p>
                        <div style="width: 95%; float: left;">
{#                            <div style="float: left;margin-left: 20px;" class="input-group select-config-div">#}
{#                                <label for="id" class="control-label">用户id</label>#}
{#                                <p>#}
{#                                    <input id="id" name="id" type="text" class="config-input">#}
{#                                </p>#}
{##}
{#                            </div>#}
                            <div style="float: left;margin-left: 20px;" class="input-group select-config-div">
                                <label for="real_name" class="control-label">真实姓名</label>
                                <p>
                                    <input id="real_name" name="real_name" type="text" class="config-input">
                                </p>
                            </div>
                            <div style="float: left;margin-left: 20px;" class="input-group select-config-div">
                                <label for="username" class="control-label">用户名</label>
                                <p>
                                    <input id="username" name="username" type="text" class="config-input">
                                </p>
                            </div>

                            <div style="float: left;margin-left: 20px;" class="input-group select-config-div">
                                <label for="id" class="control-label">每页显示：</label>
                                <select name="limit" id="showNumSelect" class="config-input">
                                    {% for i in limits %}
                                        {% if i == limit %}
                                            <option selected="selected" value="{{ i }}">{{ i }}条</option>
                                        {% else %}
                                            <option value="{{ i }}">{{ i }}条</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="input-group" style="width: 5%; float: right; margin-top: 70px;">
                            <input type="text" class="no-display">
                            <span id="searchBtn" onclick="searchTasks()" class="form-control pull-left btn btn-sm btn-primary"
                                    style="margin-top:20px;width: 50px">检索
                            </span>
                        </div>
                        <p style="clear: both"></p>
                        <div class="form-group">
                        </div>
                    </form>
                </div>
            {% endif %}

        <!--
            <div class="box-header with-border" style="border-color: #1b6d85">
            </div>
            <div id="ItemsTree" style="position:absolute;left:200px;top:90px; display:none;width:250px;height:300px;border:dashed 1px #000000; background-color:#F7F7F7; overflow:auto"></div>
        -->
        <!-- 展示搜索出来的任务 -->
            <div id="main">
                <div id="showMessage" v-show="message"> [[ message ]]</div>
                <div class="box-body" v-show="showMain">
                    <form id="model_form" role="form"
                          method="post">{% csrf_token %}
                        <div class="group">
                            <!--
                            {/% for action in actions %}
                                {/% if action.status == 1 %}
                                    <button style="margin-right:20px;" type="button" class="btn btn-primary btn-xs" disabled="true" status="{/{ action.status }}" onclick="allocateTasks(this)">{/{ action.name }}</button>
                                {/% else %}
                                    <button style="margin-right:20px;" type="button" class="btn btn-primary btn-xs" status="{/{ action.status }}" onclick="allocateTasks(this)">{/{ action.name }}</button>
                                {/% endif %}
                            {/% endfor %}
                            -->

                            <table id="task_each_table" border="1" class="table table-bordered table-hover table-striped">
                                <thead>
                                <tr>
{#                                    <th class="action-checkbox">#}
{#                                        <input type="checkbox" name="th_checkbox" onclick="checkAll(this)">#}
{#                                    </th>#}
                                    <th v-for="head in tableData.headers">
                                        <span style="float: left">
                                            [[ head.name ]]
                                        </span>
                                        {% if field.rank %}
                                            <a href="?[[ head.rank ]]=[[ head.rank_tag ]][[ page_args ]]"
                                               style="float: right">
                                                {% if field.rank_tag == 0 %}
                                                    <i class="fa fa-fw fa-sort"></i>
                                                {% elif field.rank_tag == 1 %}
                                                    <i class="fa fa-fw fa-sort-numeric-asc"></i>
                                                {% elif field.rank_tag == -1 %}
                                                    <i class="fa fa-fw fa-sort-numeric-desc"></i>
                                                {% endif %}
                                            </a>
                                        {% endif %}
                                    </th>
                                    {% if not summaryd_etails_id %}
                                        <th>
                                        <span style="float: left">
                                            操作
                                        </span>
                                    </th>
                                    {% endif %}
                                </tr>
                                </thead>
                                <tbody>
                                    <template v-for="task in tableData.tasks">
                                        <!--<tr v-if="task.allocation_flag">-->
                                        <tr>
{#                                            <td class="action-checkbox">#}
{#                                                <input type="checkbox" name="td_checkbox" value="[[ task.id ]]" onclick="checkOne(this)">#}
{#                                            </td>#}
                                            <template v-for="head in tableData.headers">
                                                <template v-if="head.key == 'allocation_flag'|| head.key == 'finish_flag' || head.key == 'savetime' || head.key == 'last_modify_time' || head.key == 'status'">
                                                    <td v-if="head.key == 'status'">[[ parseStatus(task[head.key]) ]]</td>
                                                    <td v-else>[[ parseTime(task[head.key]) ]]</td>
                                                </template>
                                                <template v-else>
                                                    <td v-if="head.key == 'username'">[[ task[head.key] ]]</td>
                                                    <td v-else>[[ task[head.key] ]]</td>
                                                </template>
                                            </template>
                                             {% if not summaryd_etails_id %}
                                              <td class="btn-group">
                                                <button type="button" value="[[ task.id ]]" class="btn btn-info btn-xs" onclick="detailOneConfig([[task.id]])">往期完成详情</button>
                                                </td>
                                            {% endif %}

                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                            <p class="" id="paginator">
                                <a class="btn btn-default btn-xs" v-if="paginator.current > 1" onclick="toPage('first',paginator.limit)">首页</a>
                                <a class="btn btn-default btn-xs" v-else disabled="true">首页</a>
                                <a class="btn btn-default btn-xs" v-if="paginator.current > 1" onclick="toPage('prev',paginator.limit)">上一页</a>
                                Page [[ paginator.current ]] of [[ paginator.last ]]
                                <span  v-show="total">共[[ total ]]个</span>
                                <a class="btn btn-default btn-xs" v-if="paginator.current < paginator.last" onclick="toPage('next',paginator.limit)">下一页</a>
                                <a class="btn btn-default btn-xs" v-if="paginator.current < paginator.last" onclick="toPage('last',paginator.limit)">尾页</a>
                                <a class="btn btn-default btn-xs" v-else disabled="true">尾页</a>
                                <input type="text" id="page-judge" style="width: 30px;height:20px; margin-left: 20px" onkeyup="toPage('judge', paginator.limit)">
                                <a class="btn btn-default btn-xs"  onclick="toPage('judge', paginator.limit)">跳页</a>
                            </p>
                        </div>
                        <!-- /.box-footer -->
                        <div class="box-footer">
                            <button class="btn btn-primary no-display" id="submit_button">确认</button>
                            <button type="button" class="btn btn-primary" id="save_submit" name="_save"
                                    style="display: none">sure
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        function detailOneTask(tid){
           var url = "{% url 'task:detail' %}" + "?id=" + tid + "&type=task" + "&user=user";
           //window.location.href = url;
           window.open(url);
        }

        function detailOneConfig(cid){
           var summaryd_etails_id = cid
            if('{{ is_agent }}'=== '1'){
            window.location.href="{% url 'task:config_user_agent' %}"+"?summaryd_etails_id="+String(summaryd_etails_id)
            }else{
            window.location.href="{% url 'task:config_user' %}"+"?summaryd_etails_id="+String(summaryd_etails_id)
            }
        }
        function taskall(cid){
            var url = "{% url 'task:manage' 'task' %}" + "?id=" + cid ;
            window.open(url);
        }
        function handleall(cid){
            var url = "{% url 'task:manage' 'task' %}" + "?id=" + cid +"&status=2" ;
            window.open(url);
        }
        function configall(cid){
            var url = "{% url 'task:config' %}" + "?id=" + cid ;
            window.open(url);
        }
        {#function incomeall(cid){#}
        {#    var url = "{% url 'task:income' %}" + "?id=" + cid ;#}
        {#    window.open(url);#}
        {#}#}

        function __check(tids){
            $.ajaxSetup({
                data:{
                    csrfmiddlewaretoken:'{{ csrf_token }}',
                    tids: tids
                }
            });
            $.post(
                "{% url 'task:check' %}",
                function(response){
                    var msg = response.message;
                    if (msg){
                        alert(msg);
                    }
                    toPage("current");
                    clearCheckAll();
                }
            )
        }

        function allocate(tids, uids){
            if (!tids){
                tids = $("#taskIds").val();
            }
            if (!uids){
                var _uids = [];
                $("input[name='utd_checkbox']:checked").each(
                    function(){
                        _uids.push($(this).val())
                    }
                );
                uids = _uids.join();
            }
            if(uids.length === 0){
                return false
            }
            if (tids.length === 0){
                console.log(tids,uids);
                $("#taskMessage").modal();
                return false
            }else{
                $.ajaxSetup({
                    data:{
                        csrfmiddlewaretoken:'{{ csrf_token }}',
                        tids: tids,
                        uids: uids
                    }
                });
                $.post(
                    "{% url 'task:allocate' %}",
                    function(response){
                        var msg = response.message;
                        console.log(msg);
                        if (msg){
                            alert(msg);
                        }
                        mainVue.message = response.message;
                        toPage('current');
                        clearCheckAll();
                    }
                )
            }
            $("#taskIds").val("");
        }


        function detailOneTask(tid){
           var url = "{% url 'task:detail' %}" + "?id=" + tid + "&type=task" + "&user=admin";
           window.location.href = url;
        }

        function confirmClose(){
            var tids = $("#taskIds").val();
            var userIds = [];
            $("input[name='utd_checkbox']:checked").each(
                function(){
                    userIds.push($(this).val());
                }
            );
            if (tids.length === 0){
                $("#taskMessage").modal();
                return false;
            }
            uids = userIds.join();
            if (uids.length === 0){
                $("#userMessage").modal();
                return false
            }
            allocate(tids, uids);
            _clearChecked();
        }
        function cancelClose(){
            _clearChecked();
        }
        function _clearChecked(){
            if ($("input[name='uth_checkbox']").is(":checked")){
                $("input[name='uth_checkbox']").prop("checked", false)
            }
            $("input[name='utd_checkbox']:checked").each(
                function(){
                    $(this).prop("checked", false);
                }
            );
        }
        function showUsers(){
            var userBox = $("#userList");
            userBox.modal()
        }
        function checkAll(obj){
            if ($(obj).is(":checked")){
                $("input[name='td_checkbox']").prop("checked", true)
            }else{
                $("input[name='td_checkbox']").prop("checked", false)
            }

        }
        function clearCheckAll(){
            $("input[name='th_checkbox']").prop("checked", false)
        }
        function checkOne(obj){
            if ($("input[name='th_checkbox']").is(":checked")){
                $("input[name='th_checkbox']").prop("checked", false)
            }else{
                var unChecked = 0;
                $("input[name='td_checkbox']").each(
                    function(){
                        if ($(this).is(":checked")){

                        }else{
                            unChecked += 1
                        }
                    }
                );
                if (unChecked === 0){
                    $("input[name='th_checkbox']").prop("checked", true)
                }
            }
        }
        function _checkAll(obj){
            if ($(obj).is(":checked")){
                $("input[name='utd_checkbox']").prop("checked", true)
            }else{
                $("input[name='utd_checkbox']").prop("checked", false)
            }

        }
        function _checkOne(obj){
            if ($("input[name='uth_checkbox']").is(":checked")){
                $("input[name='uth_checkbox']").prop("checked", false)
            }else{
                var unChecked = 0;
                $("input[name='utd_checkbox']").each(
                    function(){
                        if ($(this).is(":checked")){

                        }else{
                            unChecked += 1
                        }
                    }
                );
                if (unChecked === 0){
                    $("input[name='uth_checkbox']").prop("checked", true)
                }
            }
        }
        Vue.config.delimiters = ["[[", "]]"];


        function toPage(page){
            if (mainVue.paginator){
                if (page == 'current'){
                    page = mainVue.paginator.current
                }
                if (page == 'next'){
                    page = mainVue.paginator.current + 1
                }
                if (page == 'prev'){
                    page = mainVue.paginator.current - 1
                }
                if (page == 'first'){
                    page = 1
                }
                if (page == 'last'){
                    page = mainVue.paginator.last
                }
                if (page == 'judge'){
                    page = $("#page-judge").val();
                }
                if (page < 1) {
                    page = 1;
                }
                if (page > mainVue.paginator.last){
                    page = mainVue.paginator.last;
                }
                if (page < mainVue.paginator.first){
                    page = mainVue.paginator.first;
                }
            }else{
                page = 1;
            }
            mainVue.page = page;
            render(mainVue);
        }
        var is_agent = '{{ is_agent }}'
        var summaryd_etails_id = '{{ summaryd_etails_id }}'
        function render(obj){
            if(is_agent==='1'){
                var searchForm = obj.searchForm + '&page=' + obj.page + '&is_agent='+is_agent;
            }else {
                var searchForm = obj.searchForm + '&page=' + obj.page;
            }
            $.get(
                "{% url 'task:filter_configusers_admin' %}",
                searchForm,
                function(response){
                    if (response){
                        obj.showMain = true;
                        obj.tableData = response.tableData;
                        obj.paginator = response.paginator;
                        obj.message = response.message;
                        obj.total = response.total;
                        console.log(obj.paginator);
                    }else{
                        obj.showMain = false;
                    }
                }
            )
        }
        var mainVue = new Vue({
            el: "#main",
            data: {
                page: 1,
                status: 1,
                limit: {{ limit }},
                searchForm: "",
                checkedAll: false,
                showMain: false,
                tableData: {},
                paginator: {},
                message: "",
                total:"",
            },
            methods: {
                parseTime :function (timeStamp){
                    if (!timeStamp){
                        return ""
                    }
                    var newDate = new Date();
                    newDate.setTime(timeStamp * 1000);
                    return newDate.toLocaleDateString()
                },
                parseStatus: function(status){
                    var statuses = {
                        1:{
                            name:"待分配"
                        },
                        2:{
                            name:"处理中"
                        },
                        3:{
                            name:"待审核"
                        },
                        4:{
                            name:"已合格"
                        },
                        5:{
                            name:"不合格"
                        },
                        0:{
                            name:"已回收"
                        }
                    };
                    return statuses[status]["name"]
                },
                //searchTasks: searchTasks,
                getTasks: function(){
                    if(is_agent==='1'){
                        var searchForm = 'page=' + this.page + '&limit=' + this.limit + '&status=' + this.status + '&is_agent='+is_agent;
                    }else {
                        var searchForm = 'page=' + this.page + '&limit=' + this.limit + '&status=' + this.status;
                    }

                    $.get(
                        "{% url 'task:filter_configusers_admin' %}",
                        searchForm,
                        function(response){
                            if (response){
                                this.showMain = true;
                                this.tableData = response.tableData;
                                this.paginator = response.paginator;
                                this.message = response.message;
                                this.total = response.total;
                                console.log(this.paginator);
                            }else{
                                this.showMain = false;
                            }
                        }
                    )
                }
            },
            watch: {
{#                page: function(){#}
{#                    render(this);#}
{#                }#}
            }
        });
        function searchTasks(){
            if(is_agent==='1'){
                mainVue.searchForm = $("#searchForm").serialize() + '&is_agent='+is_agent;
            }else {
                mainVue.searchForm = $("#searchForm").serialize();
            }
            if(summaryd_etails_id ){
                mainVue.searchForm = mainVue.searchForm + '&summaryd_etails_id=' + summaryd_etails_id;
            }
            $.get(
                "{% url 'task:filter_configusers_admin' %}",
                mainVue.searchForm,
                function(response){
                    if (response){
                        mainVue.limit = response.limit;
                        mainVue.showMain = true;
                        mainVue.limits = response.limits;
                        mainVue.tableData = response.tableData;
                        mainVue.paginator = response.paginator;
                        mainVue.message = response.message;
                        mainVue.total = response.total;
                    }else{
                        mainVue.showMain = false;
                    }
                }
            )
        }
        searchTasks();
        //$("#taskManager").addClass("active");
        function changeColor(id, color){
            //$(id).parent().parent().parent().children().children().children().find("li[color='green']");
            $(id).parent().parent().addClass("active");
            $(id).children().css("color", color);
        }
        //$("#taskManager").addClass("active");
        {#changeColor("#config_user", "#00FF7F");#}
        //when page onload, init the table.
        //render(mainVue);
        if('{{ is_agent }}'==='1'){
            changeColor("#config_user_agent", "#00FF7F");
        }else {
           changeColor("#config_user", "#00FF7F");
        }
        laydate.render({
              elem: '#test1'
              ,range: true
            });
            laydate.render({
              elem: '#test2'
              ,range: true
            });
            laydate.render({
              elem: '#test3'
              ,range: true
            });
    </script>
{% endblock section_content %}
